<template>
  <div class="hello">
    <el-col :span="6">
      <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
        <p v-html="menu"></p>
      </el-menu>
    </el-col>
  </div>
</template>

<script>
import nav from '../../static/menu.json';

export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: '早安，打工人',
      nav: null,
      menu: null,
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
  mounted() {
    this.nav = nav;
    for (let i = 0; i <= this.nav.length; i++) {

    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .col{
    background-color: aqua;
  }
  .el-row{
    margin-bottom: 20px;
  }
</style>
